<script setup lang="ts">
import { onBeforeMount, reactive } from "vue";
import { useGlobal, deviceDetection } from "@pureadmin/utils";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";

import Profile from "./components/Profile.vue";
import Preferences from "./components/Preferences.vue";
import Logs from "./components/Logs.vue";

import ProfileIcon from "~icons/ri/user-3-line";
import PreferencesIcon from "~icons/ri/settings-3-line";
import LogsIcon from "~icons/ri/window-line";

defineOptions({
  name: "UserCenter"
});

const { $storage } = useGlobal<GlobalPropertiesApi>();

// 状态参数
const state = reactive({
  witchPane: "profile",
  isOpen: deviceDetection() ? false : true,
  isShowDialog: false
});

const panes = [
  {
    key: "profile",
    label: "个人信息",
    icon: ProfileIcon,
    component: Profile
  },
  {
    key: "preferences",
    label: "账号设置",
    icon: PreferencesIcon,
    component: Preferences
  },
  {
    key: "logs",
    label: "安全日志",
    icon: LogsIcon,
    component: Logs
  }
];

const handleChangePanes = (key: string) => {
  state.witchPane = key;
  if (deviceDetection()) {
    state.isOpen = !state.isOpen;
  }
};

onBeforeMount(() => {
  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
});

// 开启模态框
const open = () => {
  state.isShowDialog = true;
};

defineExpose({
  open
});
</script>

<template>
  <teleport to="body">
    <el-dialog
      v-model="state.isShowDialog"
      title="用户中心"
      width="1220px"
      class="min-h-[350px]"
    >
      <el-container class="h-full ml-[-16px]">
        <el-aside
          v-if="state.isOpen"
          class="pure-account-settings overflow-hidden px-2 dark:!bg-[var(--el-bg-color)] border-r-[1px] border-[var(--pure-border-color)]"
          width="180px"
        >
          <el-menu
            :default-active="state.witchPane"
            class="pure-account-settings-menu"
          >
            <el-menu-item
              v-for="item in panes"
              :key="item.key"
              :index="item.key"
              @click="handleChangePanes(item.key)"
            >
              <div class="flex items-center z-10">
                <el-icon><IconifyIconOffline :icon="item.icon" /></el-icon>
                <span>{{ item.label }}</span>
              </div>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="p-0! min-h-[350px]">
          <LaySidebarTopCollapse
            v-if="deviceDetection()"
            class="px-0"
            :is-active="state.isOpen"
            @toggleClick="state.isOpen = !state.isOpen"
          />
          <component
            :is="panes.find(item => item.key === state.witchPane).component"
            :class="[
              !deviceDetection() && 'ml-4',
              'min-w-[180px]',
              'max-w-[100%]'
            ]"
          />
        </el-main>
      </el-container>
    </el-dialog>
  </teleport>
</template>

<style lang="scss">
.pure-account-settings {
  height: calc(60vh - 70px);
  min-height: 350px;
  background: var(--pure-theme-menu-bg);
}

.pure-account-settings-menu {
  background-color: transparent;
  border: none;

  .el-menu-item {
    height: 48px !important;
    color: var(--pure-theme-menu-text);
    background-color: transparent !important;
    transition: color 0.2s;

    &:hover {
      color: var(--pure-theme-menu-title-hover) !important;
    }

    &.is-active {
      color: #fff !important;

      &:hover {
        color: #fff !important;
      }

      &::before {
        position: absolute;
        inset: 0 8px;
        clear: both;
        margin: 4px 0;
        content: "";
        background: var(--el-color-primary);
        border-radius: 3px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
body[layout] {
  .el-menu--vertical .is-active {
    color: #fff !important;
    transition: color 0.2s;

    &:hover {
      color: #fff !important;
    }
  }
}
</style>
